<style lang="less" scoped>
.pdflist{
    .pdflist_data{
      background: white;
      padding-left: 0.5vw;
      padding-right: 0.5vw;
      width: 61vw;
      margin-left: 18.5vw;
      .title{
        font-size: 1.1vw;
      }
      .pdfitemimg{
        background-image: url(../../../images/xinghao.png);
        background-size:100% 100%;
        width: 1.5vw;
        height: 1.5vw;
        margin-left: 2vw;
      }
      .pdfitemtitle{
        font-size: 0.85vw;
        line-height: 1.5vw;
        margin-left: 2vw;
      }
      .pdfitem_data{
        position:relative;
        cursor:pointer;
        margin-top: 1vw;
      }
      .pdfitemtitle:hover{
        color: #fa4400;
      }
      .pdflist_b{
        background-image: url(../../../images/ditu3.jpg);
        background-size:100% 100%;
        width: 61vw;
        min-height: 39vw;
      }
  }
  .afftix-data{
    position:relative;
    width: 10vw;
    margin-left: 8.2vw;
    .affix_title_img{
      position: absolute;
      width: 10vw;
    }
    .afftix-data-list{
      position: absolute;
      top:3vw;
      background: white;
      width: 10vw;
      box-sizing: border-box;
      border: 0.15vw solid #FF8D2F;
      border-radius: 1vw;
      padding: 0;
    }
    .afftix-data-item{
      cursor:pointer;
      height:2vw;
      width: 9.82vw;
      font-size: 1vw;
      color: black;
      margin-left: -0.05vw;
      
    }
    .afftix-data2-item{
      cursor:pointer;
      background: #858382;
      color: white;
      height:2vw;
      width: 9.82vw;
      margin-left: -0.05vw;
      // padding: 0.5vw;
    }
    .afftix-title{
      line-height: 2vw;
      text-align-last:justify;
      margin:0 auto;
      font-size: 0.9vw;
    }
    .afftix-data-item:hover{
      background: #A9A9A9;
      color: white;
    }
    .afftix-fenge{
      background: #A9A9A9;
      width: 9.7vw;
      opacity:0.2;
      height: 0.01vw;
      margin-left: 0.05vw;
    }
  }

}

</style>
<template>
  <div class="pdflist">
    <MainUser></MainUser>

    <MainTitle ></MainTitle>
    <affix :offset="height*0.3" style="width:10vw;">
      <div class="afftix-data">
        
        <div class="afftix-data-list">
          <div style="height:1vw;"></div>
          <div v-for="(data,i) in types" >
            <div class="afftix-fenge"></div>
            <div class="afftix-data-item"  v-if="type != data.type && i == types.length-1" style="border-radius: 0 0 0.9vw 0.9vw;">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
            <div class="afftix-data2-item"  v-if="type == data.type && i == types.length-1" style="border-radius: 0 0 0.9vw 0.9vw;">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
            <div class="afftix-data-item"  v-if="type != data.type && i != types.length-1">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
            <div class="afftix-data2-item"  v-if="type == data.type && i != types.length-1">
                <div class="afftix-title" :style="typewidth" @click="downaffitx(data.type)">{{data.name}}</div>
            </div>
          </div>
        </div>
        <el-image
          class="affix_title_img"
          :src="titleimg"
          :fit="'cover'" ></el-image>
      </div>
      
        
    </affix>
    <div class="pdflist_data" >
      <div style="height:0.5vw;"></div>
        <div class="title" v-html="title"></div>
        <div class="pdflist_b" v-loading="loading">
          <el-row :gutter="20" >
            <el-col :span="12">
                <div v-for="(item,i) in test_reportslist1"  class="pdfitem_data" >
                    <div class="pdfitemtitle" v-html="item.title" @click="dakaipdf(item.id)"></div>
                </div>
            </el-col>
            <el-col :span="12" >
              <div   v-for="(item,i) in test_reportslist2"  class="pdfitem_data">
                <div class="pdfitemtitle" v-html="item.title" @click="dakaipdf(item.id)"></div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div style="height:1vw"></div>
        <el-pagination
          background
          style="text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="prev, pager, next,sizes"
          :current-page="pagintion.page"
          :page-sizes="pagesizes"
          :page-size="pagintion.page_size"
          :total="pagintion.total">
        </el-pagination>
        <div style="height:1vw"></div>
    </div>
    
  </div>
</template>
<script>
const link = document.createElement('a')
import { test_reports,intellectualPropertyTypes } from '@/request/api';
import MainTitle from '../main_title'
import MainUser from '../main_user'
export default {
    data() {
        return {
            titleimg:require("../../../images/affix_title_img.png"),
            test_reportslist1:[],
            test_reportslist2:[],
            loading:false,
            size:0,
            type:"",
            title:"",
            pagintion: {
              total: 0,
              page_size:30,
              page: 1,
            },
            pagesizes: [30],
            types:[
                  ],
            typewidth:'width:4vw',
            height:window.screen.height,
        }
    },
    mounted() {
      this.title="知识产权";
      this.gettest_reportslist();
      this.getintellectualPropertyTypes();
    },

    methods: {
      //翻页
      handleCurrentChange(val) {
        this.pagintion.page = val;
        this.gettest_reportslist();
      },
      //修改条数
      handleSizeChange(val){
        this.pagintion.page_size = val;
        this.gettest_reportslist();
      },
      //获取小概念pdf列表
      gettest_reportslist(){
          var param = {};
          param.page = this.pagintion.page;
          param.size = this.pagintion.page_size;
          if(this.type == ""){
            param.type = "6,7,8,9,10";
          }else{
            param.type = this.type;
          }
          this.loading = true;
          test_reports(param).then(res => {
            this.loading = false;
            if(res.ok){
              this.pagintion.total = res.data.total;
              this.test_reportslist1 = [];
              this.test_reportslist2 = [];
              var count = res.data.data.length;
              for(var i = 0; i < res.data.data.length;i++){
                if(i*2<count){
                  this.test_reportslist1.push(res.data.data[i]);
                }else{
                  this.test_reportslist2.push(res.data.data[i]);
                }
              }
            }
          });
      },
      downaffitx(type){
        this.type = type;
        this.gettest_reportslist();
      },
      //获取知识产权分类
      getintellectualPropertyTypes(){
        intellectualPropertyTypes({}).then(res => {
            if(res.ok){
              var typelenght = 4;
              this.types = [];
              for(var i in  res.data){
                console.log(i);
                this.types.push({type:i,name:res.data[i]});
                if(res.data[i].length > typelenght){
                  typelenght = res.data[i].length;
                  this.typewidth = 'width:'+typelenght*0.9+'vw;'
                }
              }
            }
        })
      },
      dakaipdf(id){
        let routeUrl = this.$router.resolve({
          path: 'jlb_xgnpdf',
          query: {'id': id}
        });
        window.open(routeUrl.href, '_blank');
      },


    },
    components: {
        MainTitle,
        MainUser
    },

}
</script>
